<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../styles/reset.css">
  <link rel="stylesheet" href="../styles/font.css">
  <link rel="stylesheet" href="../styles/base.css">
  <link rel="stylesheet" href="../styles/css/rank.css">
  <title>瑜伽星人</title>
</head>
<body>
  <div class="container">
    <div class="head-wrap">
      <select class="select-block clear-select" >
        <option value="常州市" selected>常州市</option>
      </select>
      <i class="iconfont icon-triangle"></i>
    </div>
    <div class="content">
      <div>
        <a class="keeper-list" href="./detail.html">
          <div class="icon-wrap">
            <!-- icon3个不同颜色 -->
            <i class="iconfont icon-rank icon-first"></i>
            <p class="rank-txt">1</p>
          </div>
          <div class="avator-bg">
            <div class="user-avator" style="background-image:url(http://cdn.50yoga.cn/pics/public/sweet/images/shopkeeper/banner2.0.jpg)"></div>
          </div>
          <p class="user-num">9999号</p>
          <p class="user-name overflow-txt">zhouting</p>
          <div class="vote-num"><span>1000</span>票</div>
        </a>
        <a class="keeper-list" href="./detail.html">
          <div class="icon-wrap">
            <!-- icon3个不同颜色 -->
            <i class="iconfont icon-rank icon-second"></i>
            <p class="rank-txt">2</p>
          </div>
          <div class="avator-bg">
            <div class="user-avator" style="background-image:url(http://cdn.50yoga.cn/pics/public/sweet/images/shopkeeper/banner2.0.jpg)"></div>
          </div>
          <p class="user-num">9999号</p>
          <p class="user-name overflow-txt">zhouting</p>
          <div class="vote-num"><span>1000</span>票</div>
        </a>
      </div>
      <img class="to-top" src="http://cdn.50yoga.cn/pics/public/sweet/images/shopkeeper/totop.png">
    </div>
    <!-- 底部Tabbar -->
    <div class="tabbar-wrap">
      <a class="tab-item" href="./index.html">
        <div class="bottom-wrap">
          <i class="iconfont icon-home"></i>
          <p class="tab-txt">首页</p>
        </div>
      </a>
      <a class="tab-item" href="./rank.html">
        <div class="bottom-wrap">
          <i class="iconfont icon-linerank"></i>
          <p class="tab-txt">排名</p>
        </div>
      </a>
      <a class="tab-item" href="./entrance.html">
        <div class="bottom-wrap">
          <i class="iconfont icon-edit"></i>
          <p class="tab-txt">报名</p>
        </div>
      </a>
      <a class="tab-item" href="./rule.html">
        <div class="bottom-wrap">
          <i class="iconfont icon-rule"></i>
          <p class="tab-txt">规则</p>
        </div> 
      </a>
    </div>
  </div>
</body>
</html>